<!--
 * @Author: Christion.Young
 * @Date: 2020-11-24 17:51:01
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-12-30 17:12:45
 * @Description: 弹出框
-->
<template>
    <el-dialog v-dialogDrag
               title="查看过滤器"
               :visible.sync="dialogVisible"
               width="700px"
               append-to-body
               top="5%">
        <el-tabs v-model="activeName">
            <!-- 基本信息 -->
            <el-tab-pane label="基本信息"
                         name="basicInformation">
                <el-form ref="basicInformationForm"
                         :model="basicInformationForm"
                         label-width="100px"
                         label-position="right">
                    <el-form-item label="编码："
                                  prop="filterCode">
                        <el-input v-model="basicInformationForm.filterCode"
                                  disabled></el-input>
                    </el-form-item>
                    <el-form-item label="名称："
                                  prop="filterName">
                        <el-input v-model="basicInformationForm.filterName"
                                  :disabled='examine'></el-input>
                    </el-form-item>
                    <el-form-item label="过滤器类型："
                                  prop="filterType">
                        <el-select v-model="basicInformationForm.filterType"
                                   :disabled='examine'
                                   style="width:560px;"
                                   placeholder="请选择过滤器">
                            <el-option v-for="item in filterTypeOptions"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态："
                                  prop="status">
                        <el-select v-model="basicInformationForm.status"
                                   :disabled='examine'
                                   style="width:560px;"
                                   placeholder="请选择状态">
                            <el-option v-for="item in statusOptions"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="权限："
                                  prop="ruleType">
                        <el-radio-group v-model="basicInformationForm.ruleType"
                                        :disabled='examine'>
                            <el-radio label="0">任何人可读写</el-radio>
                            <el-radio label="1">创建人可读写其他人可读</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="描述："
                                  prop="descn">
                        <el-input type="textarea"
                                  v-model="basicInformationForm.descn"
                                  :disabled='examine'></el-input>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <!-- 过滤条件 -->
            <el-tab-pane label="过滤条件"
                         name="filterCondition">
                <div class="tabBox">
                    <el-form ref="filterConditionForm"
                             :model="filterConditionForm"
                             label-position="right">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="创建方式："
                                              prop="createWay">
                                    <el-radio-group v-model="filterConditionForm.createWay"
                                                    :disabled='examine'>
                                        <el-radio label="1">向导方式</el-radio>
                                        <el-radio label="0">手动输入</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="金融工具表选择："
                                              prop="financialITS">
                                    <el-select v-model="filterConditionForm.financialITS"
                                               :disabled='examine'
                                               style="width:200px;"
                                               placeholder="请选择金融工具表">
                                        <el-option v-for="item in fundToolTableOptions"
                                                   :key="item.tableId"
                                                   :label="item.tableNameCn"
                                                   :value="item.tableId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div class="tabContent">
                    <div class="tabContentTab"
                         v-show="filterConditionForm.createWay==='1'?true:false">
                        <div class="tabContentA">
                            <div class="tabContentAtitle">SQL展示：</div>
                            <div>
                                <el-input type="textarea"
                                          disabled
                                          v-model="tabContentAdescn">
                                </el-input>
                            </div>
                            <div class="tabContentAtitle">条件：</div>
                            <div class="tabContentAoperate">
                                <el-row>
                                    <el-col :span="14">
                                        <el-form ref="operationForm"
                                                 :model="operationForm"
                                                 label-width="84px"
                                                 label-position="right">
                                            <el-form-item label="字段选择："
                                                          prop="fieldSelection">
                                                <el-select v-model="operationForm.fieldSelection"
                                                           :disabled='examine'
                                                           placeholder="请选择字段">
                                                    <el-option v-for="item in fieldSelectionOptions"
                                                               :key="item.columnCn"
                                                               :label="item.columnCn"
                                                               :value="item.columnCode">
                                                    </el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item label="操作符："
                                                          prop="operator">
                                                <el-radio-group v-model="operationForm.operator"
                                                                :disabled='examine'>
                                                    <el-radio style="margin-right: 4px;"
                                                              label="in"><span class="spanTXT">包含（in）</span></el-radio>
                                                    <el-radio style="margin-right: 4px;"
                                                              label="not in"><span class="spanTXT">不包含（not in）</span></el-radio>
                                                    <el-radio v-if="operationForm.fieldSelection==='STRING'?false:true"
                                                              style="margin-right: 4px;margin-top: 10px;"
                                                              label="between"><span class="spanTXT">在....之间（between）</span></el-radio>
                                                </el-radio-group>
                                            </el-form-item>
                                            <el-form-item label="条件输入："
                                                          prop="conditionInput">
                                                <div v-if="fieldSelectionType==='STRING'?true:false">
                                                    <el-select v-model="operationForm.conditionInput"
                                                               filterable
                                                               multiple
                                                               :disabled='examine'
                                                               placeholder="请选择维度">
                                                        <el-option v-for="item in stringOption"
                                                                   :key="item.columnCn"
                                                                   :label="item.dictItemName"
                                                                   :value="item.dictItemCode">
                                                            <span style="float: left">{{ item.dictItemName }}</span>
                                                            <span style="float: right">{{ item.dictItemCode }}</span>
                                                        </el-option>
                                                    </el-select>
                                                </div>
                                                <div v-if="fieldSelectionType==='DATE'?true:false">
                                                    <div v-if="operationForm.operator==='in'?true:false">
                                                        <span class="spanTXT">在</span>
                                                        <el-date-picker v-model="operationForm.conditionInput"
                                                                        :disabled='examine'
                                                                        type="date"
                                                                        style="width:130px;"
                                                                        value-format="yyyy-MM-dd"
                                                                        format="yyyy-MM-dd"></el-date-picker>
                                                        <span class="spanTXT">之中</span>
                                                    </div>
                                                    <div v-if="operationForm.operator==='not in'?true:false">
                                                        <span class="spanTXT">不在</span>
                                                        <el-date-picker v-model="operationForm.conditionInput"
                                                                        :disabled='examine'
                                                                        type="date"
                                                                        style="width:130px;"
                                                                        value-format="yyyy-MM-dd"
                                                                        format="yyyy-MM-dd"></el-date-picker>
                                                        <span class="spanTXT">之中</span>
                                                    </div>
                                                    <div v-if="operationForm.operator==='between'?true:false">
                                                        <el-date-picker v-model="operationForm.conditionInput"
                                                                        type="date"
                                                                        style="width:130px;"
                                                                        :disabled='examine'
                                                                        value-format="yyyy-MM-dd"
                                                                        format="yyyy-MM-dd"></el-date-picker>
                                                        <span class="spanTXT">和</span>
                                                        <el-date-picker v-model="operationForm.conditionInputAnd"
                                                                        type="date"
                                                                        style="width:130px;"
                                                                        :disabled='examine'
                                                                        value-format="yyyy-MM-dd"
                                                                        format="yyyy-MM-dd"></el-date-picker>
                                                        <span class="spanTXT">之间</span>

                                                    </div>
                                                    <div v-if="operationForm.operator===''?true:false">
                                                        <span class="spanTXT"
                                                              style="color:red;">(提示：请先选择操作符再操作)</span>
                                                    </div>
                                                </div>
                                                <div v-if="fieldSelectionType==='NUMBER'?true:false">
                                                    <div v-if="operationForm.operator==='in'?true:false">
                                                        <span class="spanTXT">在</span>
                                                        <el-input v-model="operationForm.conditionInput"
                                                                  :disabled='examine'
                                                                  style="width:130px;"></el-input>
                                                        <span class="spanTXT">之中</span>
                                                    </div>
                                                    <div v-if="operationForm.operator==='not in'?true:false">
                                                        <span class="spanTXT">不在</span>
                                                        <el-input v-model="operationForm.conditionInput"
                                                                  :disabled='examine'
                                                                  style="width:130px;"></el-input>
                                                        <span class="spanTXT">之中</span>
                                                    </div>
                                                    <div v-if="operationForm.operator==='between'?true:false">
                                                        <el-input v-model="operationForm.conditionInput"
                                                                  :disabled='examine'
                                                                  style="width:130px;"></el-input>
                                                        <span class="spanTXT">和</span>
                                                        <el-input v-model="operationForm.conditionInputAnd"
                                                                  :disabled='examine'
                                                                  style="width:130px;"></el-input>
                                                        <span class="spanTXT">之间</span>

                                                    </div>
                                                    <div v-if="operationForm.operator===''?true:false">
                                                        <span class="spanTXT"
                                                              style="color:red;">(提示：请先选择操作符再操作)</span>
                                                    </div>
                                                </div>
                                                <div v-if="operationForm.fieldSelection===''?true:false">
                                                    <span class="spanTXT"
                                                          style="color:red;">(提示：请先选择金融工具表和字段再操作)</span>
                                                </div>
                                            </el-form-item>
                                            <div class="tabContentBtn">
                                                <el-button :disabled='examine'>校验并增加</el-button>
                                            </div>
                                        </el-form>
                                    </el-col>
                                    <el-col :span="10">
                                        <el-table ref="SQLTable"
                                                  style="height:200px;"
                                                  :data="SQLTableData">
                                            <el-table-column prop="conditionFlag"
                                                             :show-overflow-tooltip="true"
                                                             align="center"
                                                             header-align="center"
                                                             label="描述">
                                            </el-table-column>
                                            <el-table-column prop="sql"
                                                             :show-overflow-tooltip="true"
                                                             align="center"
                                                             header-align="center"
                                                             label="SQL">
                                            </el-table-column>
                                            <el-table-column prop="operate"
                                                             align="center"
                                                             header-align="center"
                                                             label="操作">
                                                <template>
                                                    <div style="cursor:pointer">删除</div>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </div>
                    <div class="tabContentTab"
                         v-show="filterConditionForm.createWay==='1'?false:true">
                        <div class="tabContentB">
                            <div class="tabContentBtitle"> 手动输入(示例：month1Val>1000 and month2Val!=2000)：</div>
                            <div>
                                <el-input type="textarea"
                                          :disabled='examine'
                                          v-model="validateSqlData.sql">
                                </el-input>
                            </div>
                            <div class="tabContentBtitle">表字段(可单击添加)：</div>
                            <div class="tabContentBoperate">
                                <el-tag v-for="item in fieldSelectionOptions"
                                        :disabled='examine'
                                        :key="item.columnEn"
                                        style="margin:10px;"
                                        effect="dark">
                                    {{ item.columnEn+'('+ item.columnCn +')' }}
                                </el-tag>
                            </div>
                        </div>
                        <div class="tabContentBtn">
                            <el-button :disabled='examine'>校验并增加</el-button>
                            <el-button :disabled='examine'>清空</el-button>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
        <div slot="footer">
            <el-button @click="confirmTne">确 定</el-button>
            <el-button @click="cancelTne">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { publicManage_dat } from '@/api/index'
export default {
    props: {
        //弹窗开关
        dialogVisibleFilterProps: {
            type: Boolean,
            default: false,
        },
        //编辑数据
        editTheData: {
            type: Object,
            default() {
                return {}
            },
        },
    },
    data: function () {
        return {
            examine: true,
            dialogVisible: false,
            activeName: 'basicInformation',
            //基本信息-表单
            basicInformationForm: {
                filterCode: '',
                filterName: '',
                filterType: '',
                status: '',
                ruleType: '',
                descn: '',
            },
            //基本信息-表单-过滤器类型-下拉
            filterTypeOptions: [
                {
                    value: '1',
                    label: 'Data Element',
                },
            ],
            //基本信息-表单-状态-下拉
            statusOptions: [
                {
                    value: '1',
                    label: '启用',
                },
                {
                    value: '0',
                    label: '停用',
                },
            ],
            //过滤条件-顶部表单
            filterConditionForm: {
                createWay: '1',
                financialITS: '',
            },
            //过滤条件-顶部表单-金融工具表-下拉
            fundToolTableOptions: [],
            //向导方式-SQL展示
            tabContentAdescn: '',
            //向导方式-条件-左侧操作
            operationForm: {
                fieldSelection: '',
                operator: '',
                conditionInput: '',
                conditionInputAnd: '',
            },
            //向导方式-条件-左侧操作-字段选择下拉OR手动输入-SQL标签按钮
            fieldSelectionOptions: [],
            //向导方式-条件-左侧操作-字段选择下拉-类型
            fieldSelectionType: '',
            //向导方式-条件-左侧操作-字符类型下拉
            stringOption: [],
            //向导方式-条件-右侧表单
            SQLTableData: [],
            //手动输入
            validateSqlData: {
                filtersqlCode: '',
                sql: '',
                tableNameEn: '',
            },
        }
    },
    computed: {},
    watch: {
        editTheData(val) {
            // console.log(val, '传过来的值')
            this.basicInformationForm = val
            this.filterConditionForm.createWay = val.isNavigator
            this.getFielterTable(val.filterCode)
            switch (val.isNavigator) {
                case '0':
                    this.getPubFiltersqlById('0', val.filterCode)
                    break
                case '1':
                    this.queryForPageWithParams(val.filterCode)
                    this.getPubFiltersqlById('1', val.filterCode)
                    break
                default:
                    break
            }
        },
        dialogVisibleFilterProps(val) {
            this.dialogVisible = val
            this.activeName = 'basicInformation'
        },
        dialogVisible(val) {
            this.$emit('getDialogVisibleFilter', val)
        },
    },
    created() {
        this.fundToolTableQueryList()
    },
    mounted() {},
    beforeUpdate() {},
    methods: {
        //   金融工具表下拉列表
        fundToolTableQueryList() {
            publicManage_dat.fundToolTableQueryList().then((res) => {
                if (res.code === 200) {
                    this.fundToolTableOptions = res.datas
                }
            })
        },
        //   回显-金融工具表下拉值
        getFielterTable(val) {
            publicManage_dat
                .getFielterTable({ filtersqlCode: val })
                .then((res) => {
                    if (res.code === 200) {
                        // this.filterConditionForm.financialITS = res.message
                        let arr = []
                        arr = this.fundToolTableOptions.filter((item) => {
                            return item.tableNameEn === res.message
                        })
                        let str = arr[0].tableId
                        this.filterConditionForm.financialITS = str
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.message,
                        })
                    }
                })
        },
        //   过滤条件-获取SQL展示
        getPubFiltersqlById(val, item) {
            publicManage_dat
                .getPubFiltersqlById({
                    filtersqlCode: item,
                    isNavigator: val,
                })
                .then((res) => {
                    if (res.code == 200) {
                        this.tabContentAdescn = ''
                        this.validateSqlData.sql = ''
                        switch (val) {
                            case '1':
                                this.tabContentAdescn = res.data
                                break
                            case '0':
                                this.validateSqlData.sql = res.data
                                break
                            default:
                                break
                        }
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.message,
                        })
                    }
                })
        },
        //   过滤条件-获取列表展示
        queryForPageWithParams(val) {
            publicManage_dat
                .queryForPageWithParams({
                    filtersqlCode: val,
                })
                .then((res) => {
                    if (res.code == 200) {
                        this.SQLTableData = res.data
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.message,
                        })
                    }
                })
        },
        //确定
        cancelTne() {
            this.dialogVisible = false
        },
        //取消
        confirmTne() {
            this.dialogVisible = false
        },
    },
}
</script>
<style lang="scss" scoped>
.tabBox {
    background: #f5f5f5;
    width: 660px;
    height: 34px;
    border-radius: 4px;
}
.tabContent {
    width: 660px;
    .tabContentTab {
        width: 100%;
        .tabContentA {
            .tabContentAtitle {
                background: #f5f5f5;
                width: 660px;
                height: 34px;
                border-radius: 4px;
                font-size: 14px;
                font-weight: 900;
                line-height: 34px;
                margin-top: 20px;
                margin-bottom: 5px;
                padding-left: 10px;
            }
            .tabContentAoperate {
                width: 660px;
                height: 200px;
            }
        }
        .tabContentB {
            .tabContentBtitle {
                background: #f5f5f5;
                width: 660px;
                height: 34px;
                border-radius: 4px;
                font-size: 14px;
                font-weight: 900;
                line-height: 34px;
                margin-top: 20px;
                margin-bottom: 5px;
                padding-left: 10px;
            }
            .tabContentBoperate {
                width: 660px;
                margin-bottom: 10px;
            }
        }
    }
}
.tabContentBtn {
    width: 330px;
    display: flex;
    justify-content: space-evenly;
}
.spanTXT {
    font-size: 12px;
}
</style>
